<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="true" %>
<html>
<head>
    <title>销售订单查询</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">
    <Collapse value="search">
        <Panel name="search">
            条件查询
            <p slot="content">
                <i-form inline :label-width="80">
                    <form-item label="编号:">
                        <i-input type="text" v-model="xsOrderVo.id" style="width: 80px"/>
                    </form-item>
                    <form-item label="录入日期:">
                        <row>
                            <col span="12"> <date-picker  type="datetime" format="yyyy-MM-dd HH:mm" @on-change="xsOrderVo.startDate=$event"  placeHolder="请输入起始日期" style="width: 150px"  ></date-picker></col>
                            <col span="12"> <date-picker  type="datetime" format="yyyy-MM-dd HH:mm" @on-change="xsOrderVo.endDate=$event"   placeHolder="请输入结束日期" style="width: 150px" ></date-picker></col>
                        </row>
                    </form-item>
                    <form-item label="出库日期:" >
                        <row>
                            <col span="12"> <date-picker type="datetime" format="yyyy-MM-dd HH:mm" @on-change="xsOrderVo.startDatel=$event"  placeHolder="请输入起始日期" style="width: 150px"  ></date-picker></col>
                            <col span="12"> <date-picker type="datetime" format="yyyy-MM-dd HH:mm" @on-change="xsOrderVo.endDatel=$event"   placeHolder="请输入结束日期" style="width: 150px"  ></date-picker></col>
                        </row>
                    </form-item>
                    <form-item label="客户:">
                        <i-select v-model="xsOrderVo.providerId" style="width: 80px"filterable>
                            <i-option value="">--不限--</i-option>
                            <i-Option v-for="item in kehuList" :value="item.id" :key="item.id">{{item.kehuName}}</i-Option>
                        </i-select>
                    </form-item>
                    <form-item label="销售员:">
                        <i-select v-model="xsOrderVo.creator" style="width: 105px"filterable>
                            <i-option value="">--不限--</i-option>
                            <i-Option v-for="item in xsuserList" :value="item.id" :key="item.id">{{item.username}}</i-Option>
                        </i-select>
                    </form-item>
                    <form-item label="库管员:"filterable>
                        <i-select v-model="xsOrderVo.stockKeeper" style="width: 105px">
                            <i-option value="">--不限--</i-option>
                            <i-Option v-for="item in kguserList" :value="item.id" :key="item.id">{{item.username}}</i-Option>
                        </i-select>
                    </form-item>
                    <form-item label="订单状态:">
                        <i-select v-model="xsOrderVo.state" style="width: 150px">
                            <i-option value="">--不限--</i-option>
                            <i-option value="0">未出库</i-option>
                            <i-option value="1">已出库</i-option>
                        </i-select>
                    </form-item>

                    <i-button type="primary"icon="ios-search" style="margin-left:20px" @click="pageNo=1;searchXsOrderList();">搜索</i-button>
                    <i-button type="success"icon="md-sync" @click="xsOrderVo={ type:2};searchXsOrderList();pageNo=1"></i-button>
                </i-form>
            </p>
        </Panel>
    </Collapse>

<i-table  ref="table" :columns="myColumns" :data="pageResult.rows" :height="400" border stripe @on-row-dblclick="rowClick"  @on-selection-change="tableSelection=arguments[0]" ><!--  @on-row-click="rowClick"-->
    <template slot-scope="{row}" slot="type">
        <span>{{row.type==1?"采购":"销售"}}</span>
    </template>
    <template  slot-scope="{row}" slot="state">
        <span>{{row.state==0?"未出库":"已出库"}}</span>
    </template>
</i-table>
    <modal  v-model="OrderFlag" title="订单详请" width="700">
        <div style="width: 660px;height: 140px ;border: 0.5px lightgray solid">
        <i-form :label-width="80" >
            <form-item label="流水号:"style="float: left;">
                <i-input v-model="order.id" size="large" style="width: 110px;text-align: center"readonly/>
            </form-item>
            <form-item label="录入日期:" style="float: left">
                <i-input  style="width: 130px;" v-model="order.createTime" size="large"readonly/>
            </form-item>
            <form-item label="出库日期:"style="float: left">
                <i-input  style="width: 130px;text-align: center" v-model="order.stockTime" size="large"readonly/>
            </form-item>
            <form-item label="销售员:"style=" margin-top:-10px;float: left">
                <i-input   style="width: 110px;text-align: center"v-model="order.creatorName" size="large"readonly/>
            </form-item>
            <form-item label="库管员:"style="margin-top:-10px;float: left">
                <i-input  style="width: 130px;text-align: center" v-model="order.stockKeeperName" size="large"readonly/>
            </form-item>
            <form-item label="客户:"style="margin-top:-10px;float:left">
                <i-input  style="width: 130px;text-align: center" v-model="order.providerIdName" size="large"readonly/>
            </form-item>
            <form-item label="状态:"style="margin-top:-10px;float:left">
                <i-select  v-model="order.state" style="width: 110px;background-color: white" disabled="disabled">
                    <i-option value="0" >未出库</i-option>
                    <i-option value="1">已出库</i-option>
                </i-select>
           <!--     <i-input  style="width: 110px;text-align: center" v-model="order.state" size="large"readonly/>-->
            </form-item>
        </i-form>
        </div>
      <i-table style="clear:both;" :columns="Columns1"  :data="mydata" :height="200" border stripe >

            <template  slot-scope="{row}" slot="state">
                <span>{{row.state==1?"已出库":"未出库"}}</span>
            </template>
        </i-table>
        <div slot="footer">
            <i-button type="info" icon="md-archive" @click="caiDao">导出</i-button>
            <i-button type="error" icon="ios-print-outline" @click="exportPdf">打印浏览</i-button>
        </div>
    </modal>
<Page :total="pageResult.total"
      :page-size="pageSize"
      @on-change="pageNo=arguments[0];searchXsOrderList();"
      show-sizer
      :page-size-opts="[5,10,15]"
<%--	@on-page-size-change切换每页条数时的回调，返回切换后的每页条数--%>
      @on-page-size-change="pageSize=arguments[0];searchXsOrderList();"
/>
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            myColumns:[
               // {type:"selection",width:60,align:"center"},
                {title:"编号",key: "id",align:"center"},
                {slot:"type",title:"类型",align:"center"},
                {title:"录入日期",key: "createTime",align:"center",width:119},
                //{title:"审核日期",key: "checkTime",align:"center",width:119},
                {title:"出库日期",key: "stockTime",align:"center",width:119},
                {title:"销售员",key: "creatorName",align:"center"},
                {title:"库管员",key: "stockKeeperName",align:"center"},
                {title:"客户",key: "providerIdName",align:"center"},
                {title:"合计金额",key: "totalMoney",align:"center"},
                {slot:"state",title:"状态",align:"center"},
                // {title:"运单号",key: "wayBillCode",align:"center",width:119},
                //  {title:"操作",slot:"action",align:"center"}
            ],
            Columns1:[
                {title:"编号",key: "id",align:"center"},
                {title:"商品编号",key: "goodsId",align:"center",width:119},
                {title:"商品名称",key: "goodsName",align:"center",width:119},
                {title:"商品价格",key: "price",align:"center",width:119},
                {title:"数量",key: "num",align:"center"},
                {title:"金额 ",key: "money",align:"center"},
                {title:"状态",slot: "state",align:"center"},
            ],
            pageResult:{
                rows:[],
                total:50,
            },
            mydata:[],
            pageNo:1,
            pageSize:5,
            order:{},
            kehuList:[],
            goodsList:[],
            xsuserList:[],
            kguserList:[],
            tableSelection:[],
            addFlag:false,
            OrderFlag:false,
            xsOrderVo:{
               type:2
            },
          //  OrderDetailFlag:false,
        },
        mounted(){
            this.searchXsOrderList();
            this.searchKehuList();
            this.searchGoodsList();
            this.searchXsUserList();
            this.searchKgUserList();
        },
        methods:{
            searchXsOrderList(){
                axios.get(`${ctx}/sal/xxddlr/search/${this.pageNo}/${this.pageSize}`,{params:this.xsOrderVo})
                    .then(({data})=>{
                        this.pageResult=data.result;
                    });
            },
            searchKehuList(){
                axios.get(`${ctx}/jibenxinxi/kehu/list`)
                    .then(({data})=>{
                        this.kehuList=data.result;
                    });
            },
            searchXsUserList(){
                axios.get(`${ctx}/renshi/user/Xslist`)
                    .then(({data})=>{
                        this.xsuserList=data.result;
                    });
            },
            searchKgUserList(){
                axios.get(`${ctx}/renshi/user/Kglist`)
                    .then(({data})=>{
                        this.kguserList=data.result;
                    });
            },
            searchGoodsList(){
                axios.get(`${ctx}/jibenxinxi/sp/list`)
                    .then(({data})=>{
                        this.goodsList=data.result;
                    });
            },
            //点击弹出订单详情
            rowClick(data1,index){//data 该行数据 ，index该行索引
                axios.get(`${ctx}/sal/xxddlr/list?id=${data1.id}`)
                    .then(({data})=>{
                        this.mydata=data.result;
                        Object.assign(this.order,data1);
                        this.OrderFlag=true
                    })
            },
            caiDao(){


                //获得你要携带的参数
                location.href=`${ctx}/sal/xxddck/exportExcel?id=${this.order.id}
                 &providerIdName=${this.order.providerIdName}
                &creatorName=${this.order.creatorName}

                &stockKeeperName=${this.order.stockKeeperName}
                `

            },
            exportPdf(){
                location.href=`${ctx}/sal/xxddck/exportPdf?id=${this.order.id}
                 &providerIdName=${this.order.providerIdName}
                &creatorName=${this.order.creatorName}

                &stockKeeperName=${this.order.stockKeeperName}
                `

            }


        }
    })
</script>
</html>
